<!-- activiti静态流程图 -->
<template>
  <el-image :src="imageContent" fit="fit">
    <template #error>
      <i class="el-icon-picture-outline">加载流程图</i>
    </template>
  </el-image>
</template>

<script>
import { showFlowRunImgByInstantId } from '../../api/wf';

export default {
  name: 'ActivitiRunImg',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    processInstanceId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      //图片流
      imageContent: ''
    };
  },
  watch: {
    modelValue: {
      handler(newVal) {},
      immediate: true
    }
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      //图片二进制流转base
      if (this.processInstanceId) {
        showFlowRunImgByInstantId(this.processInstanceId).then((response) => {
          this.imageContent = 'data:image/png;base64,' + btoa(new Uint8Array(response).reduce((data, byte) => data + String.fromCharCode(byte), ''));
        });
      }
    }
  }
};
</script>
